<template>
  <div class="container">
    <div class="passwordBox">
      <div class="itemBox frow faic">
        <p class="label label_account frow faic fjcfe">{{ account }} 444444</p>
        <div class="contentBox faic frow">
          <!-- <Input v-model="account" :maxlength="NAME_LENGTH_LIMIT" placeholder="请输入手机号" class="inputClass faic frow" readonly /> -->
        </div>
        <div class="label label_ frow faic"></div>
      </div>
      <div class="itemBox frow faic">
        <p class="label frow faic fjcfe">验证码:</p>
        <div class="contentBox faic frow">
          <div>
            <Input
              v-model="oldCode"
              placeholder="请输入验证码"
              class="inputClass faic frow"
              @on-change="oldCodeChange"
            />
          </div>
          <div
            class="label label_ cp frow faic"
            @click="_getOldCode"
          >{{ oldCodeTime == 60 ? "获取验证码" : oldCodeTime + "S" }}</div>
        </div>
      </div>
      <div class="itemBox frow faic">
        <p class="label frow faic fjcfe">新密码:</p>
        <div class="contentBox faic frow">
          <div>
            <Input
              type="password"
              class="inputClass faic frow"
              v-model="info.password"
              :maxlength="20"
              placeholder="请输入新密码(8-18位)"
            />
          </div>
          <div class="label label_ frow faic"></div>
        </div>
      </div>
      <div class="itemBox frow faic">
        <p class="label frow faic fjcfe">确认密码:</p>
        <div class="contentBox faic frow">
          <div>
            <Input
              type="password"
              class="inputClass faic frow"
              v-model="info.password2"
              :maxlength="20"
              placeholder="请再次输入新密码"
            />
          </div>
          <div class="label label_ cp frow faic"></div>
        </div>
      </div>
    </div>
    <btn-wrap/>
  </div>
</template>
<script>
import { Input, Message } from "view-ui-plus";
import btnWrap from "./btn.vue";
import { mapActions, mapState } from "vuex";
import {
  getLoginSmsCodeSend,
  postLoginSmsCodeVerify,
  putLoginPasswordReset
} from "@/api/user";
export default {
  data() {
    return {
      info: {
        phone: "",
        phoneToken: "",
        password: "",
        password2: ""
      },
      account: "",
      oldCodeTime: 60,
      oldCode: "",
      codeType: 3, // 1变更信息 2重置密码 3身份验证
      oldCodeTimer: null
    };
  },
  mounted() {
    this.init();
  },
  components: {
    Input,
    btnWrap
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    async submitBtn() {
      if (!this.info.name) {
        return Message.fail("请输入姓名");
      }
      await putLoginPasswordReset(this.info);
      Message.success("保存成功");
      this.init();
    },
    init() {
      this.info = {
        phone: this.userInfo.account,
        phoneToken: "",
        password: "",
        password2: ""
      };
      this.oldCode = "";
      this.oldCodeTime = 60;
      this.oldCodeTimer && clearInterval(this.oldCodeTimer);
      this.oldCodeTimer = null;
      this.account =
        this.userInfo.account.substring(0, 3) +
        "****" +
        this.userInfo.account.substring(7);
    },
    async getOldCode() {
      if (this.oldCodeTime != 60) return;
      await getLoginSmsCodeSend({ phone: this.info.phone, codeType: 3 });
      Message.success("验证码发送成功");
      this.timeoutOldCodeTime();
    },
    timeoutOldCodeTime() {
      this.oldCodeTimer = setInterval(() => {
        this.oldCodeTime -= 1;
        if (this.oldCodeTime <= 0) {
          this.oldCodeTime = 60;
          clearInterval(this.oldCodeTimer);
        } else {
        }
      }, 1000);
    },
    oldCodeChange() {
      if (this.oldCode.length != 4) return false;
      this.verifyOldCode();
    },
    async verifyOldCode() {
      let { phoneToken } = await postLoginSmsCodeVerify({
        code: this.oldCode,
        phone: this.info.phone,
        codeType: 3
      })
      this.info.phoneToken = phoneToken;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .passwordBox {
    .itemBox {
      padding: 12px 36px 12px 0;
      margin-bottom: 0px;
      border-bottom: 1px solid rgba(124, 124, 124, 0.2);
      justify-content: space-between;
      .label {
        font-size: 16px;
        font-weight: 400;
        color: #808080;
        width: 80px;
        min-width: 80px;
        text-align: right;
        height: 48px;
      }
      .label_ {
        color: @mainColor;
        text-align: right;
        margin-left: 12px;
        user-select: none;
        font-size: 14px;
      }
      .label_account {
        width: 300px;
        text-align: left;
        padding-left: 24px;
        justify-content: flex-start;
      }
      .contentBox {
        flex: 1;
        justify-content: flex-end;
        .inputClass {
          color: #808080;
        }
      }
    }
  }
}
</style>
